<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作-综合练习</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function() {
		//给按钮添加点击事件
		$(":button").click(function(){
			//1.创建一个tr
			var tr=$("<tr></tr>");			
			//2.创建四个td,向td中添加内容
			var td1=$("<td></td>");
			td1.append($("#username").val());
			var td2=$("<td></td>");
			td2.append($("#phone").val());
			var td3=$("<td></td>");
			td3.append($("#email").val());
			var td4=$("<td></td>");			
			//创建一个删除链接
			var a=$("<a href='javascript:void(0)'>删除</a>");
			td4.append(a);			
			//完成删除功能
			a.click(function(){
				//$(this).parent().parent().remove();
				$(this).parents("tr").remove();
			});	
			
			//3.将td添加到tr中
			tr.append(td1).append(td2).append(td3).append(td4);			
			//4.将tr添加到table中
			$("#tab").append(tr);
		});
	});
</script>
</head>
<body>
<div align="center">
	<table id="tab" border='1'>
		<tr>
			<td>姓名</td>
			<td>电话</td>
			<td>邮箱</td>
			<td>删除</td>
		</tr>
	</table>
	<hr>
	姓名:<input type="text" id="username">
	电话:<input type="text" id="phone">
	邮箱:<input type="text" id="email">
	<input type="button" value="添加">
	</div>
</body>
</html>